<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="title-section">
					<text class="title">每日灵感</text>
					<text class="subtitle">记录生活中的灵光一现</text>
				</view>
				<view class="filter-btn" @click="showFilterOptions = true">
					<up-icon name="filter" size="20" color="#3c9cff"></up-icon>
				</view>
			</view>
		</view>
		
		<!-- 灵感卡片列表 -->
		<scroll-view scroll-y class="inspirations-scroll" refresher-enabled 
			@refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
			
			<view v-if="inspirations.length > 0" class="inspirations-list">
				<view 
					class="inspiration-card" 
					v-for="(item, index) in inspirations" 
					:key="index"
					:class="[`color-${item.colorIndex}`]"
					:style="{animationDelay: `${index * 0.05}s`}"
					@click="viewInspiration(item)"
				>
					<view class="card-top">
						<view class="inspiration-category">{{ item.category }}</view>
						<view class="inspiration-date">{{ item.date }}</view>
					</view>
					
					<view class="card-content">
						<text class="inspiration-title">{{ item.title }}</text>
						<text class="inspiration-desc">{{ item.content }}</text>
					</view>
					
					<view class="card-bottom">
						<view class="tag-list">
							<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
								{{ tag }}
							</view>
						</view>
						<view class="favorite" @click.stop="toggleFavorite(index)">
							<up-icon 
								:name="item.favorite ? 'star-fill' : 'star'" 
								size="24" 
								:color="item.favorite ? '#ffaa00' : '#c0c4cc'">
							</up-icon>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image class="empty-image" src="/static/user-img.jpg" mode="aspectFit"></image>
				<text class="empty-text">还没有灵感，点击添加按钮开始记录吧！</text>
			</view>
		</scroll-view>
		
		<!-- 添加灵感按钮 -->
		<view class="add-btn" @click="showAddModal = true">
			<up-icon name="plus" size="28" color="#ffffff"></up-icon>
		</view>
		
		<!-- 添加灵感弹窗 -->
		<view class="modal-mask" v-if="showAddModal" @click="showAddModal = false">
			<view class="add-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">添加灵感</text>
					<up-icon name="close" size="24" color="#909399" @click="showAddModal = false"></up-icon>
				</view>
				
				<view class="modal-form">
					<view class="form-item">
						<text class="form-label">标题</text>
						<input class="form-input" placeholder="给你的灵感起个标题吧" v-model="newInspiration.title" />
					</view>
					
					<view class="form-item">
						<text class="form-label">内容</text>
						<textarea class="form-textarea" placeholder="详细描述你的灵感..." v-model="newInspiration.content" />
					</view>
					
					<view class="form-item">
						<text class="form-label">分类</text>
						<view class="category-select">
							<view 
								class="category-option" 
								v-for="(category, index) in categories" 
								:key="index"
								:class="{ active: newInspiration.category === category }"
								@click="newInspiration.category = category"
							>
								{{ category }}
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">标签</text>
						<view class="tags-input">
							<view class="tag-item" v-for="(tag, index) in newInspiration.tags" :key="index">
								{{ tag }}
								<text class="tag-delete" @click="removeTag(index)">×</text>
							</view>
							<input 
								class="tag-add-input" 
								placeholder="添加标签"
								v-model="tagInput"
								@confirm="addTag"
							/>
						</view>
					</view>
				</view>
				
				<button class="submit-btn" @click="saveInspiration">保存</button>
			</view>
		</view>
		
		<!-- 筛选选项 -->
		<view class="modal-mask" v-if="showFilterOptions" @click="showFilterOptions = false">
			<view class="filter-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">筛选灵感</text>
					<up-icon name="close" size="24" color="#909399" @click="showFilterOptions = false"></up-icon>
				</view>
				
				<view class="filter-options">
					<view class="filter-section">
						<text class="section-title">按分类筛选</text>
						<view class="filter-tags">
							<view 
								class="filter-tag" 
								v-for="(category, index) in categories" 
								:key="index"
								:class="{ active: activeFilter === category }"
								@click="filterByCategory(category)"
							>
								{{ category }}
							</view>
							<view 
								class="filter-tag" 
								:class="{ active: activeFilter === 'all' }"
								@click="filterByCategory('all')"
							>
								全部
							</view>
						</view>
					</view>
					
					<view class="filter-section">
						<text class="section-title">排序方式</text>
						<view class="sort-options">
							<view 
								class="sort-option" 
								:class="{ active: sortBy === 'newest' }"
								@click="sortBy = 'newest'"
							>
								最新添加
							</view>
							<view 
								class="sort-option" 
								:class="{ active: sortBy === 'oldest' }"
								@click="sortBy = 'oldest'"
							>
								最早添加
							</view>
							<view 
								class="sort-option" 
								:class="{ active: sortBy === 'favorites' }"
								@click="sortBy = 'favorites'"
							>
								收藏优先
							</view>
						</view>
					</view>
				</view>
				
				<button class="submit-btn" @click="applyFilter">应用筛选</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 分类选项
const categories = ['学习', '工作', '创意', '目标', '阅读'];

// 灵感列表数据
const inspirations = reactive([
	{
		title: '建立每日阅读习惯',
		content: '每天清晨抽出30分钟阅读，坚持一年可以读完24本书，提升知识广度。',
		category: '目标',
		tags: ['习惯养成', '阅读'],
		date: '今天',
		favorite: true,
		colorIndex: 0
	},
	{
		title: '学习Vue3组合式API',
		content: '深入研究Vue3的组合式API和响应式系统，提升开发效率和代码质量。',
		category: '学习',
		tags: ['编程', '前端'],
		date: '昨天',
		favorite: false,
		colorIndex: 1
	},
	{
		title: '创意项目规划',
		content: '开发一个帮助用户记录和整理创意想法的工具，包含分类、标签和提醒功能。',
		category: '创意',
		tags: ['项目', '规划'],
		date: '2天前',
		favorite: true,
		colorIndex: 2
	}
]);

// 新建灵感
const newInspiration = reactive({
	title: '',
	content: '',
	category: '创意',
	tags: []
});

// 状态变量
const showAddModal = ref(false);
const showFilterOptions = ref(false);
const isRefreshing = ref(false);
const tagInput = ref('');
const activeFilter = ref('all');
const sortBy = ref('newest');

// 添加标签
const addTag = () => {
	if (tagInput.value.trim() && !newInspiration.tags.includes(tagInput.value.trim())) {
		newInspiration.tags.push(tagInput.value.trim());
		tagInput.value = '';
	}
};

// 移除标签
const removeTag = (index) => {
	newInspiration.tags.splice(index, 1);
};

// 保存灵感
const saveInspiration = () => {
	if (!newInspiration.title.trim() || !newInspiration.content.trim()) {
		uni.showToast({
			title: '请填写标题和内容',
			icon: 'none'
		});
		return;
	}
	
	// 创建新灵感对象
	const inspiration = {
		...newInspiration,
		date: '刚刚',
		favorite: false,
		colorIndex: Math.floor(Math.random() * 5) // 随机颜色
	};
	
	// 添加到列表
	inspirations.unshift(inspiration);
	
	// 重置表单
	Object.assign(newInspiration, {
		title: '',
		content: '',
		category: '创意',
		tags: []
	});
	
	// 关闭弹窗
	showAddModal.value = false;
	
	// 提示成功
	uni.showToast({
		title: '添加成功',
		icon: 'success'
	});
};

// 切换收藏状态
const toggleFavorite = (index) => {
	inspirations[index].favorite = !inspirations[index].favorite;
};

// 查看灵感详情
const viewInspiration = (item) => {
	uni.showToast({
		title: `查看：${item.title}`,
		icon: 'none'
	});
};

// 按分类筛选
const filterByCategory = (category) => {
	activeFilter.value = category;
};

// 应用筛选
const applyFilter = () => {
	// 实际应用中应处理筛选逻辑
	showFilterOptions.value = false;
	
	uni.showToast({
		title: '筛选已应用',
		icon: 'success'
	});
};

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true;
	
	setTimeout(() => {
		isRefreshing.value = false;
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		});
	}, 1000);
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f7fa;
	position: relative;
	overflow-x: hidden;
	box-sizing: border-box;
	width: 100%;
}

/* 顶部区域 */
.header {
	background: linear-gradient(135deg, #3c9cff, #5d9fff);
	padding: 40rpx 30rpx 60rpx;
	box-shadow: 0 4rpx 20rpx rgba(60, 156, 255, 0.15);
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
	width: 100%;
	box-sizing: border-box;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.title-section {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.title {
	font-size: 44rpx;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 8rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.subtitle {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filter-btn {
	width: 60rpx;
	height: 60rpx;
	min-width: 60rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(5px);
	margin-left: 20rpx;
}

/* 灵感列表 */
.inspirations-scroll {
	height: calc(100vh - 200rpx);
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx;
}

.inspirations-list {
	margin-bottom: 100rpx;
	width: 100%;
}

.inspiration-card {
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
	transform: translateY(20rpx);
	width: 100%;
	box-sizing: border-box;
	
	&.color-0 {
		border-left: 8rpx solid #3c9cff;
	}
	
	&.color-1 {
		border-left: 8rpx solid #19be6b;
	}
	
	&.color-2 {
		border-left: 8rpx solid #ff9900;
	}
	
	&.color-3 {
		border-left: 8rpx solid #fa3534;
	}
	
	&.color-4 {
		border-left: 8rpx solid #9c27b0;
	}
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	flex-wrap: wrap;
}

.inspiration-category {
	font-size: 24rpx;
	color: #3c9cff;
	background-color: rgba(60, 156, 255, 0.1);
	padding: 6rpx 16rpx;
	border-radius: 6rpx;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inspiration-date {
	font-size: 24rpx;
	color: #909399;
}

.card-content {
	margin-bottom: 20rpx;
	width: 100%;
}

.inspiration-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 16rpx;
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inspiration-desc {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.5;
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
	width: 100%;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	overflow: hidden;
	max-width: calc(100% - 50rpx);
}

.tag {
	font-size: 22rpx;
	color: #909399;
	background-color: #f5f7fa;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-right: 12rpx;
	margin-bottom: 8rpx;
	max-width: 120rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.favorite {
	padding: 10rpx;
	min-width: 44rpx;
}

/* 添加按钮 */
.add-btn {
	position: fixed;
	right: 40rpx;
	bottom: 60rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #3c9cff, #5d9fff);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 8rpx 20rpx rgba(60, 156, 255, 0.3);
	z-index: 10;
}

/* 模态框遮罩 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	padding: 0 30rpx;
}

/* 添加灵感模态框 */
.add-modal {
	width: 90%;
	max-width: 650rpx;
	max-height: 80vh;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	animation: slideUp 0.3s ease;
	overflow-y: auto;
	box-sizing: border-box;
}

@keyframes slideUp {
	from {
		transform: translateY(50rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	width: 100%;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modal-form {
	margin-bottom: 30rpx;
	width: 100%;
}

.form-item {
	margin-bottom: 24rpx;
	width: 100%;
}

.form-label {
	font-size: 28rpx;
	color: #606266;
	display: block;
	margin-bottom: 10rpx;
	width: 100%;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background-color: #f5f7fa;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #303133;
	box-sizing: border-box;
}

.form-textarea {
	width: 100%;
	height: 200rpx;
	background-color: #f5f7fa;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #303133;
	box-sizing: border-box;
}

.category-select {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.category-option {
	padding: 14rpx 24rpx;
	border-radius: 8rpx;
	background-color: #f5f7fa;
	font-size: 26rpx;
	color: #606266;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	
	&.active {
		background-color: #3c9cff;
		color: #ffffff;
	}
}

.tags-input {
	display: flex;
	flex-wrap: wrap;
	background-color: #f5f7fa;
	border-radius: 8rpx;
	padding: 16rpx;
	width: 100%;
	box-sizing: border-box;
}

.tag-item {
	background-color: #ffffff;
	padding: 6rpx 12rpx;
	border-radius: 6rpx;
	margin-right: 12rpx;
	margin-bottom: 12rpx;
	font-size: 26rpx;
	color: #303133;
	display: flex;
	align-items: center;
	max-width: calc(100% - 24rpx);
	overflow: hidden;
}

.tag-delete {
	margin-left: 8rpx;
	color: #909399;
	font-size: 28rpx;
	min-width: 28rpx;
}

.tag-add-input {
	width: 160rpx;
	font-size: 26rpx;
	color: #303133;
}

.submit-btn {
	background: linear-gradient(135deg, #3c9cff, #5d9fff);
	color: #ffffff;
	border-radius: 10rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	font-weight: 500;
	width: 100%;
}

/* 筛选模态框 */
.filter-modal {
	width: 90%;
	max-width: 650rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	animation: slideUp 0.3s ease;
	box-sizing: border-box;
	max-height: 80vh;
	overflow-y: auto;
}

.filter-section {
	margin-bottom: 30rpx;
	width: 100%;
}

.section-title {
	font-size: 30rpx;
	color: #303133;
	margin-bottom: 20rpx;
	display: block;
	width: 100%;
}

.filter-tags {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.filter-tag {
	padding: 14rpx 24rpx;
	border-radius: 8rpx;
	background-color: #f5f7fa;
	font-size: 26rpx;
	color: #606266;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	
	&.active {
		background-color: #3c9cff;
		color: #ffffff;
	}
}

.sort-options {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.sort-option {
	height: 80rpx;
	display: flex;
	align-items: center;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #606266;
	margin-bottom: 10rpx;
	box-sizing: border-box;
	width: 100%;
	
	&.active {
		background-color: #f5f7fa;
		color: #3c9cff;
		font-weight: 500;
	}
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100rpx;
	width: 100%;
	box-sizing: border-box;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	margin-bottom: 30rpx;
	opacity: 0.8;
}

.empty-text {
	font-size: 28rpx;
	color: #909399;
	text-align: center;
	width: 100%;
	padding: 0 40rpx;
	box-sizing: border-box;
}
</style> 